<template>
  <TopNav title="不良事件报告"/>
  <div class="adverse-event-report-page">
    <!-- 事件信息输入区域 -->
    <div class="event-info-section">
      <h2 class="section-title">不良事件信息</h2>
      <el-form :model="eventForm">
        <el-form-item label="事件类型">
          <el-select v-model="eventForm.eventType">
            <el-option label="过敏反应" value="过敏反应"></el-option>
            <el-option label="胃肠道不适" value="胃肠道不适"></el-option>
            <el-option label="其他不良反应" value="其他不良反应"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="eventForm.productName"></el-input>
        </el-form-item>
        <el-form-item label="事件描述">
          <el-input v-model="eventForm.eventDescription"></el-input>
        </el-form-item>
        <el-form-item label="发生时间">
          <el-date-picker
              v-model="eventForm.eventTime"
              type="datetime"
              placeholder="请选择发生时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="患者信息">
          <el-input v-model="eventForm.patientInfo"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <!-- 报告提交区域 -->
    <div class="report-submit-section">
      <el-button
          type="danger"
          @click="submitReport"
          :disabled="!eventForm.eventType ||!eventForm.productName ||!eventForm.eventDescription ||!eventForm.eventTime ||!eventForm.patientInfo"
      >提交报告</el-button>
    </div>

    <!-- 报告历史区域 -->
    <div class="report-history-section">
      <h2 class="section-title">报告历史记录</h2>
      <el-table :data="reportHistory" style="width: 100%">
        <el-table-column prop="eventType" label="事件类型" width="150"></el-table-column>
        <el-table-column prop="productName" label="产品名称" width="150"></el-table-column>
        <el-table-column prop="eventDescription" label="事件描述" width="300"></el-table-column>
        <el-table-column prop="eventTime" label="发生时间" width="200"></el-table-column>
        <el-table-column prop="patientInfo" label="患者信息" width="200"></el-table-column>
        <el-table-column label="处理状态" width="150">
          <template #default="{ row }">
            <span
                :class="{
                'processing': row.processingStatus === '处理中',
                'resolved': row.processingStatus === '已处理'
              }"
            >{{ row.processingStatus }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 处理措施与优化建议区域 -->
    <div class="action-plan-section">
      <h2 class="section-title">处理措施与优化建议</h2>
      <p v-if="selectedReport">针对 <span>{{ selectedReport.productName }}</span> 的不良事件：</p>
      <p v-if="selectedReport && selectedReport.eventType === '过敏反应'">
        - 立即停止使用该产品，对患者进行过敏症状缓解治疗。<br />
        - 检查产品成分，分析可能导致过敏的物质，考虑调整配方。<br />
        - 加强产品标签警示，明确标注可能存在的过敏风险成分。
      </p>
      <p v-if="selectedReport && selectedReport.eventType === '胃肠道不适'">
        - 暂停使用产品，观察患者胃肠道症状是否缓解。<br />
        - 评估产品的营养成分比例、添加剂等是否可能引起胃肠道刺激，如有必要进行配方优化。<br />
        - 收集更多同类产品使用反馈，对比分析是否存在普遍问题。
      </p>
      <p v-if="selectedReport && selectedReport.eventType === '其他不良反应'">
        - 详细记录患者症状和反应过程，组织专业人员进行评估分析。<br />
        - 对产品生产过程、质量控制环节进行全面检查，排查潜在问题。<br />
        - 根据分析结果制定针对性的处理方案和产品改进措施。
      </p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TopNav from "@/components/TopNav/Back.vue"
// 不良事件表单数据
const eventForm = ref({
  eventType: '',
  productName: '',
  eventDescription: '',
  eventTime: '',
  patientInfo: ''
});

// 报告历史数据（模拟数据，实际应用中应从后端获取）
const reportHistory = ref([
  {
    eventType: '过敏反应',
    productName: '营养产品 A',
    eventDescription: '患者食用后出现皮肤红疹、瘙痒等过敏症状',
    eventTime: '2024-05-01 10:30:00',
    patientInfo: '患者姓名：张三，年龄：35 岁，性别：男',
    processingStatus: '已处理'
  },
  {
    eventType: '胃肠道不适',
    productName: '营养产品 B',
    eventDescription: '使用后出现恶心、呕吐、腹泻等症状',
    eventTime: '2024-05-10 15:00:00',
    patientInfo: '患者姓名：李四，年龄：42 岁，性别：女',
    processingStatus: '处理中'
  }
]);

// 选中的报告（用于展示处理措施与优化建议）
const selectedReport = ref(null);

// 提交报告方法
const submitReport = () => {
  // 这里可以添加将报告数据发送到后端的逻辑
  reportHistory.value.push({...eventForm.value, processingStatus: '处理中' });
  eventForm.value = {
    eventType: '',
    productName: '',
    eventDescription: '',
    eventTime: '',
    patientInfo: ''
  };
};

// 点击报告历史记录行时选中报告
const handleRowClick = (row) => {
  selectedReport.value = row;
};

// 页面加载时绑定点击事件
onMounted(() => {
  const table = document.querySelector('.el-table__body');
  table.addEventListener('click', (e) => {
    const target = e.target;
    if (target.tagName === 'TD') {
      const row = target.parentElement.__vue__.$.row;
      handleRowClick(row);
    }
  });
});
</script>

<style scoped>
.adverse-event-report-page {
  padding: 20px;
  background-color: #f4f4f5;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.page-header {
  text-align: center;
  margin-bottom: 20px;
}
.header-title {
  color: #303133;
  font-size: 28px;
}
.event-info-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.section-title {
  color: #303133;
  margin-bottom: 10px;
}
.report-submit-section {
  text-align: center;
  margin-bottom: 20px;
}
.report-history-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.action-plan-section {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.processing {
  color: #d9534f;
}
.resolved {
  color: #5cb85c;
}
</style>
